import React from "react";
import { View, ActivityIndicator, StyleSheet, Modal } from "react-native";

const LoadingBar = ({ visible }) => {
  return (
    <Modal animationType="fade" transparent={true} visible={visible}>
      <View style={styles.ModalBackground}></View>
      <View style={{ flex: 1 }}></View>
      <View style={styles.LoadingSpace}>
        <ActivityIndicator size="large" color="#fff" />
      </View>
      <View style={{ flex: 1 }}></View>
    </Modal>
  );
};

const styles = StyleSheet.create({
  LoadingSpace: {
    backgroundColor: "rgba(53,53,53,0.9)",
    // backgroundColor: "#a6a6a6",
    padding: 20,
    justifyContent: "center",
    borderRadius: 8,
    alignSelf: "center",
  },
  ModalBackground: {
    // backgroundColor: "#727272",
    opacity: 0.3,
    zIndex: 0,
    position: "absolute",
    width: "100%",
    height: "100%",
  },
});

export default LoadingBar;
